import { reactive, ref,toRefs,UnwrapNestedRefs } from "vue";


export function useTable<T extends { list: any; total: number }, S = object> (
    requestApi: (params: any) => RSP<T>,
    searchParams?: UnwrapNestedRefs<S>
) { 
  const query = reactive({
    pageSize: 10,
    pageNum: 1,
  });

  
  const tableData = ref<T["list"]>([]);
  const total = ref(0)

  
  async function fetchData() {
    
    const res = await requestApi({
      pageSize: query.pageSize,
      pageNum: query.pageNum,
      
      ...searchParams,
    });
    
    tableData.value = res.data.list;
    total.value = res.data.total
  }
  fetchData();

  const pageSizeChange = () => {
    fetchData()
  }

  const pageNumChange = () => {
    fetchData();
  };

  const search = () => {
    fetchData();
  }

  return {
    tableData,
    ...toRefs(query), /// toRefs 的作用是 把 里面的每个属性都变成 ref 数据，让里面的每个数据解构之后不会失去响应式特性
    total,
    pageSizeChange,
    pageNumChange,
    search
  };
};